<template>
    <div class="main">
        <!--顶栏-->
        <el-row>
            <el-col :span="24" class="title_area">
                <h4>用户管理</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>

        <!--搜索栏-->
        <div class="search_panel">
            <el-row>
                <el-col :span="4" class="jiange">
                    <el-input v-model="nick_name" placeholder="昵称"></el-input>
                </el-col>

                <el-col :span="6">
                    <el-button type="primary"  class="btn_login" @click="userList"><i class="el-icon-search"></i>查询</el-button>
                </el-col>
            </el-row>

        </div>

        <!--列表-->
        <el-table :data="tableData"  border style="width: 100%;margin-top: 20px">
            <el-table-column label="头像" >
                <template scope="scope">
                    <img :src="scope.row.profile" style="width:64px;height:64px; margin-top:8px;" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="nick_name" label="昵称"></el-table-column>
            <el-table-column prop="open_id" label="open_id"></el-table-column>
        </el-table>


        <!--分页-->
        <el-pagination class="pagination"
                       background
                       layout="prev, pager, next"
                       pagesize="20"
                       :total="pagination.total_pages">
        </el-pagination>


    </div>
</template>
<script>
  import VueQrcode from '@xkeshi/vue-qrcode';
  export default {
    data() {
      return {
        options: [{
          value: 'price',
          label: '原价'
        }, {
          value: 'discount',
          label: '折扣价'
        }, {
          value: 'score',
          label: '评分'
        }],
        prop: '',
        className:'right',
        tableData:[],
        nick_name: '',
        start: '',
        end: '',
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        total_pages: 100
      }
    },
    components: {
      VueQrcode
    },

    created() {
      this.userList()
    },

    methods: {

      shelfeBook(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }
        this.$store.dispatch('shelfBook', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '书籍上架成功',
              type: 'success'
            });
            this.bookList()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })

      },

      positionEdit(index, table) {
        var id = table[index].id
        this.$router.push({name: 'positionEdit', params: {id: id}})
      },

      relationBookBookCategory(index, table) {
        var id = table[index].id
        this.$router.push({name: 'addBookBookCategory', params: {id: id}})
      },

      deleteBook(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }

        this.$confirm('此操作将删除此座位，是否继续','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('positionDelete', params).then(ret => {
            if(ret.success) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              this.positionList()
            }else{
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      changeRight(value) {
        this.className = value
      },

      userList() {

        let params = {
          nick_name: this.nick_name
        }

        this.$store.dispatch('userList', params).then((ret) => {
//          console.log(ret)
          this.tableData = ret.users.data
          this.pagination.pagination  = ret.users.meta.pagination
        })

      },
    }
  }
</script>
<style scoped>
    .header { background: #f2f2f2; }
</style>
